import React, { useEffect, useState } from "react";
import { CommonModal } from "@/views/components/CommonModal";
import { CommonField } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import {
	Button,
	Col,
	Collapse,
	Form,
	Input,
	Row,
	Select,
	Switch,
	Checkbox,
	Space,
	Modal,
	Anchor,
	Upload,
	Radio,
	message
} from "antd";
import { DeleteTwoTone } from "@ant-design/icons";
import { goodsAttributeSubmit } from "../../../../service";
const AttrViewModal = props => {
	const { details } = props;
	const [form] = Form.useForm();
	const typeValue = Form.useWatch("type", form);

	useEffect(() => {
		if (details?.id) {
			const { id, attributeName, type, attributeValue } = details;
			const data = {
				id,
				attributeName,
				type,
				attributeValue: type == 1 ? attributeValue.split(",") : null
			};
			console.log(data);
			form.setFieldsValue(data);
		}
	}, []);

	function handleTypeChange(e) {
		if (e.target.value == 1) form.setFieldsValue({ attributeValue: ["", "", ""] });
	}

	function handleOk() {
		form.validateFields().then(async value => {
			const API_DATA = {
				id: props?.details?.id || null,
				...value,
				attributeValue: value.type == 1 ? value.attributeValue.join() : null
			};
			console.log(value, API_DATA);
			const { success, msg } = await goodsAttributeSubmit(API_DATA);
			if (success) {
				message.success("操作成功");
				props.onOk(API_DATA);
				props.onCancel();
			}
		});
	}
	return (
		<CommonModal
			title={{ title: (details?.id ? "编辑" : "新增") + "属性" }}
			open={true}
			width="400px"
			onCancel={props.onCancel}
			onOk={handleOk}
            zIndex={1200}
		>
			<Form form={form}>
				<>
					<Row gutter={[12, 6]}>
						<Col span={24}>
							<Form.Item key="attributeName" name="attributeName" rules={[{ required: true, message: "请输入属性名称" }]}>
								<CommonInput Component={Input} disabled={details.unableDel === 0} placeholder="请输入属性名称" aria-required />
							</Form.Item>
						</Col>
						<SubTitle
							title={
								<>
									输入框样式<span className="common-color5">（必填）</span>
								</>
							}
							symbol
							as="s2"
							wrapStyle={{ marginBottom: 16 }}
						/>
						<Col span={24}>
							<Form.Item name="type" initialValue={1}>
								<Radio.Group onChange={handleTypeChange}>
									<Radio key={2} value={2}>
										文本输入
									</Radio>
									<Radio key={1} value={1}>
										选项选择
									</Radio>
								</Radio.Group>
							</Form.Item>
						</Col>
						{typeValue == 1 && (
							<>
								<SubTitle
									title={
										<>
											属性值<span className="common-color5">（必填）</span>
										</>
									}
									symbol
									as="s2"
									wrapStyle={{ marginBottom: 16 }}
								/>
								<Col span={24}>
									<Form.List name="attributeValue" initialValue={["", "", ""]}>
										{(fields, { add, remove }) => (
											<>
												{fields.map((field, index) => (
													<div key={field.name} className="flex">
														<Form.Item
															{...field}
															validateTrigger={["onChange", "onBlur"]}
															rules={[
																{
																	max: 30,
																	message: "最多不可超过30个字符"
																},
																{
																	required: true,
																	whitespace: true,
																	message: "请输入属性值"
																}
															]}
															style={{ flex: 1 }}
														>
															<Input placeholder="请输入属性值" />
														</Form.Item>
														{fields.length > 1 && <DeleteTwoTone style={{ marginLeft: 10 }} onClick={() => remove(field.name)} />}
													</div>
												))}
											</>
										)}
									</Form.List>
								</Col>
							</>
						)}
					</Row>
				</>
			</Form>
		</CommonModal>
	);
};
export default AttrViewModal;
